<template>
  <el-dialog title="合同详情" size="medium" :visible.sync="params.addInfo" width="90%" :before-close="handleClose">
    <div v-if="params.addInfo">
      <el-container>
        <el-header class="addsales-header">管理区域合同信息</el-header>
        <el-main class="addsales-main">
          <el-form :inline="true" size="medium" :model="contractRegionForm"   ref="contractRegionForm" class="search-form" label-width="100px" >
            <div>
              <el-form-item label="选择区域：" prop="regionId">
                <el-select placeholder="请选择" style=" width: 150px;" name="regionId" v-model="contractRegionForm.regionId" >
                  <el-option v-for="item in regionInfoList" :key="item.regionName" :label="item.regionName" :value="item.regionId">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item  :label="labelArea"  prop="regionNum">
                <el-input  v-model="contractRegionForm.regionNum" name="regionNum" :disabled="true">
                </el-input>
              </el-form-item>
              <el-form-item :label="labelNum" prop="regionRestNum">
                <el-input  v-model="contractRegionForm.regionRestNum" name="regionRestNum" :disabled="true">
                </el-input>
              </el-form-item>
              <el-form-item :label="labelRentFee" prop="contractRegionRentFee">
                <el-input clearable v-model="contractRegionForm.contractRegionRentFee" name="contractRegionRentFee"  :disabled="true">
                </el-input>
              </el-form-item>
              <el-form-item :label="labelRentArea" prop="contractRegionRentCount">
                <el-input clearable  placeholder="请输入内容" v-model="contractRegionForm.contractRegionRentCount" name="contractRegionRentCount"  @change="countTotal">
                </el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="月租金：" prop="contractRegionAmount" >
                <el-input v-model="contractRegionForm.contractRegionAmount" name="contractRegionAmount" :disabled="true">
                </el-input>
              </el-form-item>
              <el-form-item label="场地编号："  prop="contractRegionCarNo">
                <el-input clearable placeholder="请输入内容" v-model="contractRegionForm.contractRegionCarNo" name="contractRegionCarNo" >
                </el-input>
              </el-form-item>
              <el-form-item label="车位数" prop="contractRegionParkCount" >
                <el-input clearable placeholder="请输入内容" v-model="contractRegionForm.contractRegionParkCount" name="contractRegionParkCount">
                </el-input>
              </el-form-item>
            </div>
          </el-form>
        </el-main>
      </el-container>
    </div>
    <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="formSubmitChange">确 定</el-button>
		    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        regionInfoList:[],
        labelArea: '区域总面积：',
        labelNum: '区域剩余面积：',
        labelRentFee: '月平米租金：',
        labelRentArea: '租用面积：',
        contractRegionForm: {
          regionId: '',
          regionNum:'',
          regionRestNum:'',
          contractRegionRentFee: 0,
          contractRegionRentCount: '',
          contractRegionAmount: '',
          contractRegionCarNo: '',
          contractRegionParkCount: '',
          regionName: ''
        },
        selectedRegionInfo:{}
      }
    },
    watch:{
      "params.addInfo"(){
        if (this.params.addInfo){
          this.resetFormInfo();
          this.$axios.get(this.$api.getRegionList,{params: {marketId: this.params.marketId,regionState: 1}})
            .then((res)=>{
              this.regionInfoList = res.data.result;
            })
          if(this.params2.edit){
            this.contractRegionForm = this.params2
            this.changeRegionInfo();
          }
        }
      },
      "contractRegionForm.contractRegionRentCount"(){
         let count = this.contractRegionForm.contractRegionRentCount
         let restNum = this.contractRegionForm.regionRestNum
         if (count > restNum){
            alert("不能大于剩余面积或车位,请检查后充填")
            this.contractRegionForm.contractRegionRentCount = ''
         }

      },
      "contractRegionForm.regionId"(){
        this.changeRegionInfo();
      }
    },
    methods:{
      countTotal(){
        let count = this.contractRegionForm.contractRegionRentCount
        let fee =  this.contractRegionForm.contractRegionRentFee
        this.contractRegionForm.contractRegionAmount =  count * fee
      },
      handleClose() {
        this.params.addInfo = false
      },
      changeRegionInfo(){
        if (this.contractRegionForm.regionId != "") {
          for(let item of  this.regionInfoList){
            if(item.regionId == this.contractRegionForm.regionId){
              this.selectedRegionInfo = item
              this.contractRegionForm.regionName = item.regionName
            }
          }
          if (this.selectedRegionInfo.regionType == 1){
            this.labelArea = '区域总面积(平米)：',
              this.labelNum = '区域剩余面积(平米)：',
              this.labelRentFee = '月平米租金(元)：',
              this.labelRentArea = '租用面积(平米)：'
          }else{
            this.labelArea = '区域车位数(个)：',
              this.labelNum = '区域剩余车位(个)：',
              this.labelRentFee = '月车位租金(元)：',
              this.labelRentArea = '租用车位(个)：'
          }
          let regionRestNum = this.selectedRegionInfo.regionRestNum
          if (this.params.contractRegionList.length > 0){
            let resNum = 0
            this.params.contractRegionList.map(item=>{
              if(item.regionId==this.selectedRegionInfo.regionId){
                regionRestNum = regionRestNum - ~~item.contractRegionRentCount
              }
            })
          }
          this.contractRegionForm.regionRestNum = regionRestNum
          this.contractRegionForm.regionNum = this.selectedRegionInfo.regionNum
          this.contractRegionForm.contractRegionRentFee = this.selectedRegionInfo.regionRentFee
        }
      },
      formSubmitChange(){
        let obj = JSON.stringify(this.contractRegionForm)
        if(this.params2.edit){
          this.handleClose();
        }else{
          this.$emit('insert',obj)
          this.handleClose();
        }
      },
      resetFormInfo(){
        this.contractRegionForm =  {
          regionNum:'',
          regionRestNum:'',
          regionId: '',
          contractRegionRentFee:'',
          contractRegionRentCount:'',
          contractRegionAmount:'',
          contractRegionCarNo:'',
          contractRegionParkCount:'',
          regionName: ''
        }
      }
    },
    props: [
      'params',
      'params2'
    ],

  }
</script>
<style scoped="scoped">
  .addsale-container {
    width: 1200px;
  }

  .addsales-header {
    background: #B3C0D1;
    line-height: 60px;
  }

  .addsales-main {
    padding: 0;
  }

  .none {
    display: none;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-form-items{ width: 130px;}
</style>
